<div
  class="accessory-box"
  [ngClass]="{ 'accessory-on': service.values.Active || service.values.On }"
  (longClick)="onLongClick()"
  (shortClick)="onClick()"
  tabindex="0"
>
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.heater_cooler' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="coolingGradient" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#1e8bbd">
              <animate attributeName="stop-color" values="#1e8bbd;#66d6d6;#1e8bbd" dur="5s" repeatCount="indefinite" />
            </stop>
            <stop offset="50%" stop-color="#66d6d6">
              <animate attributeName="stop-color" values="#66d6d6;#1e8bbd;#66d6d6" dur="5s" repeatCount="indefinite" />
            </stop>
            <stop offset="100%" stop-color="#1e8bbd">
              <animate attributeName="stop-color" values="#1e8bbd;#66d6d6;#1e8bbd" dur="5s" repeatCount="indefinite" />
            </stop>
          </linearGradient>
          <linearGradient id="heatingGradient" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#cc5e00">
              <animate
                attributeName="stop-color"
                values="#cc5e00;#e69533;#cc5e00;#e69533"
                dur="5s"
                repeatCount="indefinite"
              />
            </stop>
            <stop offset="50%" stop-color="#e69533">
              <animate
                attributeName="stop-color"
                values="#e69533;#cc5e00;#e69533;#cc5e00"
                dur="5s"
                repeatCount="indefinite"
              />
            </stop>
            <stop offset="100%" stop-color="#cc5e00">
              <animate
                attributeName="stop-color"
                values="#cc5e00;#e69533;#cc5e00;#e69533"
                dur="5s"
                repeatCount="indefinite"
              />
            </stop>
          </linearGradient>
        </defs>
        <!-- outer casing -->
        <rect x="3.5" y="1" width="25" height="30" rx="3" stroke="#7f7f7f" fill="none" stroke-width="1.2" />
        <!-- grille -->
        <line x1="8" y1="7" x2="8" y2="16" stroke="#7f7f7f" stroke-width="1.2" stroke-linecap="round" />
        <line x1="12" y1="7" x2="12" y2="16" stroke="#7f7f7f" stroke-width="1.2" stroke-linecap="round" />
        <line x1="16" y1="7" x2="16" y2="16" stroke="#7f7f7f" stroke-width="1.2" stroke-linecap="round" />
        <line x1="20" y1="7" x2="20" y2="16" stroke="#7f7f7f" stroke-width="1.2" stroke-linecap="round" />
        <line x1="24" y1="7" x2="24" y2="16" stroke="#7f7f7f" stroke-width="1.2" stroke-linecap="round" />
        <!-- status window -->
        <rect
          x="3.5"
          y="4"
          width="25"
          height="15"
          rx="0"
          stroke="#7f7f7f"
          stroke-width="1.2"
          fill-opacity="0.5"
          [attr.fill]="
            (service.values.CurrentHeaterCoolerState === 3 && service.values.Active === 1) || (type === 'cooler' && (service.values.Active || service.values.On))
              ? 'url(#coolingGradient)'
              : (service.values.CurrentHeaterCoolerState === 2 && service.values.Active === 1) || (type === 'heater' && (service.values.Active || service.values.On))
                ? 'url(#heatingGradient)'
                : (service.values.Active || service.values.On ? '#42d672' : '#7b7b7b')"
        />
        <!-- current temperature -->
        @if ('CurrentTemperature' in service.values) {
        <text x="16" y="27.5" font-size="7" text-anchor="middle" fill="#7f7f7f" font-family="Arial, sans-serif">
          {{ service.values.CurrentTemperature | convertTemp | number:'1.0-1' }}&deg;{{ temperatureUnits | uppercase }}
        </text>
        }
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    <div class="accessory-label grey-text">
      @if (('Active' in service.values && !service.values.Active) || ('On' in service.values && !service.values.On)) {
      {{ 'accessories.control.off' | translate }} } @else if (service.values.TargetHeaterCoolerState === 0 &&
      (hasHeating || hasCooling)) { @if (hasHeating && hasCooling) {
      <i class="fa fas fa-bullseye"></i> {{ service.values.HeatingThresholdTemperature | convertTemp | number: '1.0-1'
      }}&deg;{{ temperatureUnits | uppercase }} - {{ service.values.CoolingThresholdTemperature | convertTemp |
      number:'1.0-1' }}&deg;{{ temperatureUnits| uppercase }} } @else if (hasHeating && !hasCooling) {
      <i class="fa fas fa-bullseye"></i> {{ service.values.HeatingThresholdTemperature | convertTemp | number: '1.0-1'
      }}&deg;{{ temperatureUnits | uppercase }} } @else if (!hasHeating && hasCooling) {
      <i class="fa fas fa-bullseye"></i> {{ service.values.CoolingThresholdTemperature | convertTemp | number: '1.0-1'
      }}&deg;{{ temperatureUnits | uppercase }} } } @else if (service.values.TargetHeaterCoolerState === 1) {
      {{'accessories.control.heat' | translate }} } @else if (service.values.TargetHeaterCoolerState === 2) {
      {{'accessories.control.cool' | translate }} } @else { {{'accessories.control.on' | translate }} }
    </div>
  </div>
</div>
